<script setup>
import '@/assets/common/common.scss'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search, Me } from '@icon-park/vue-next'
import logo from '@/assets/logo-icon.png'
import '@/assets/music-css/Head.scss'
import { logoutService } from '@/api/user.js'
import { isCode1 } from '@/utils/response.js'
import { successMsg } from '@/utils/sendMsgUtils.js'
import { useUserState } from '@/stores/index.js'

const router = useRouter()
const route = useRoute()

const userState = useUserState()

const input = ref('')
const activeIndex = ref('music')
// 监听路由变化，根据当前路由名称或路径更新 index
watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes('music')) activeIndex.value = 'music'

    else if (newPath.includes('random')) {
      activeIndex.value = 'random'

    }
    else if (newPath.includes('me')){
      activeIndex.value = 'me'

    }
  },
  { immediate: true } // 在组件加载时立即执行
)
const search = () => {
  console.log(input.value)
  router.push(`/search?name=${input.value}&_=${Date.now()}`)
}
const logout = async () => {
  const resp = await logoutService()
  if (isCode1(resp)) {
    successMsg(resp.data)
    userState.clear()
    await router.push('/')
  }
}
</script>

<template>
  <div  class="top" style="background-color: whitesmoke;">
    <el-menu
      router
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
    >
      <el-menu-item disabled class="top-item">
        <img  @click="router.push('/music')" style="width: 250px; margin-bottom: 25px;" :src="logo" alt="jie-music"/>
      </el-menu-item>
      <el-menu-item class="top-item" index="music">音乐馆</el-menu-item>
      <el-menu-item class="top-item" index="random">随机推荐</el-menu-item>
      <el-menu-item class="top-item" index="me">我的音乐</el-menu-item>

      <div class="search">
        <el-input
          width="150px"
          v-model="input"
          placeholder="请输入您喜欢的音乐"
          class="input-with-select"
        >
          <template #append>
            <el-button @click="search" :icon="Search" />
          </template>
        </el-input>
      </div>
      <el-sub-menu class="top-item-icon" index="3">
        <template #title>  <me class="icon-center" theme="outline" size="45" fill="#333" :strokeWidth="3"/></template>
        <el-menu-item index="user/login">登录</el-menu-item>
        <el-menu-item index="user/register">注册</el-menu-item>
        <el-menu-item @click="logout">退出</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.el-menu-item.is-disabled {
  background: none !important;
  cursor: pointer !important;
  opacity: 1;
}
.top{
  width: 85%;
  margin: 30px auto 2px;

  .el-menu-demo {
    .top-item {
      width: 150px;
      font-size: 18px
    }
    .search {
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      align-items: center
    }
  }
}
</style>
